.skeleton {
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 200px;
  background: hsl(var(--accent-text-hs) var(--lt-100));
  border-radius: var(--radius-xl);

  &::before {
    content: '';
    position: absolute;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      to right,
      hsl(var(--accent-text-hs) var(--lt-100)) 25%,
      var(--white-accent-clr) 75%,
      hsl(var(--accent-text-hs) var(--lt-100)) 100%
    );
    animation: blink 1s infinite ease-in-out;
  }
}

@keyframes blink {
  0% {
    left: -50%;
  }

  100% {
    left: 100%;
  }
}

.skeleton-body {
  background: #fde1fa;
}

.shadow {
  box-shadow: var(--shadow-skeleton);
}
